<template>
	<view :style="{'--color':color}">
		<view  class="m-top30">
			<view class="list bot" v-for="(item,index) in info" :key="index" @click="toDetails(item)">
				<view class="user_head flexac">
					<image :src="$imgUrls(item.headimg)" mode="aspectFill" class="wh"></image> 
				</view>
				<view class="list_content">
					<text class="user_name">{{item.uname}}</text>
					<view class="Main_body" v-html="item.file_content"></view>
					<block  v-if="item.fileImgArr && item.fileImgArr.length">
					<view class="list_imgs_one" v-if="item.fileImgArr.length == 1">
						<image :src="$imgUrls(item.fileImgArr[0])" mode="aspectFill" class="list_imgs_one_img m-top10"></image> 
					</view>
					<view class="list_imgs" v-else>
						<image :src="$imgUrls(sItem)" 
						       v-for="(sItem,sIndex) in item.fileImgArr" :key="sIndex"
						       mode="aspectFill" class="list_imgs_img">
						</image>
					</view>
					</block>
					<view class="row j-sb a-center ">
						<text class="addTime h6">{{item.addTime}}</text>
						<view class="d-flex a-center">
							<view class="d-flex a-center padding20">
								<view class="iconfont icon-quanziT1 color_b4 size30"></view>
								<text class="color_b4 size28 p-left8">{{item.pinlun}}</text>
							</view>
							<view class="d-flex a-center padding20" @click.stop="zanFileId(item)">
								<view class="iconfont size30" :class="item.zanok == 1?'color icon-01':'color_b4 icon-02'"></view>
								<text class="color_b4 size28 p-left8">{{item.zan}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<emptys v-if="!info.length"></emptys> 
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'list',
		props:['pageData','classifyid','classify_info'],
		data() {
			return {
				info:[],
			}
		},
		methods: {
			zanFileId(item){
				this.$http.post({
					url: '/communityApi/zanFileId',
					data: {
						file_id: item.file_id,
						type:item.zanok==0?1:0
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					let filIndex = this.info.findIndex(n=>n.file_id == item.file_id);
					item.zanok == 1?this.info[filIndex].zanok = 0:this.info[filIndex].zanok = 1
					item.zanok == 1?this.info[filIndex].zan++:this.info[filIndex].zan--;
				})
			},
			
			toDetails(item){
				this.toUrl(`Detail?file_id=${item.file_id}`)
			}
		},
		computed: {
			...mapState(['color']),
		},
		watch:{
			pageData:{
				deep:true,
				immediate: true,
				handler(newVal){
					this.info = newVal;
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		width:100%;
		padding:30rpx 34rpx 10rpx 34rpx;
		display: flex;
	}
	.user_head{
		width:90rpx;
		height: 90rpx;
		overflow: hidden;
		border-radius: 8rpx;
		background-color: #ddd;
	}
	.list_content{
		flex:1;
		display: flex;
		flex-direction: column;
		padding-left:20rpx;
	}
	.user_name{
		color: var(--color);
		font-size:30rpx;
		font-weight: bold;
	}
	.Main_body{
		color:#000;
		font-size:28rpx;
		line-height: 40rpx;
		margin-top:10rpx;
	}
	.list_imgs_one{
		width:100%;
	}
	.list_imgs_one_img{
		max-width: 100%;
		height: 300rpx;
	}
	.list_imgs{
		width:100%;
		display: flex;
		flex-wrap: wrap;
	}
	.list_imgs_img{
		width:160rpx;
		height: 160rpx;
		margin-top:10rpx;
		margin-right: 10rpx;
	}
	.addTime{
		color:#b4b4b4;
	}
	// .headImg{
	// 	width:72rpx;
	// 	height: 72rpx;
	// 	border:2px solid var(--color);
	// }
	// .listImg{
	// 	width:600rpx;
	// 	height: 190rpx;
	// 	margin-top: 26rpx;
	// }
	// .listImg_li{
	// 	width: 188rpx;
	// 	height: 188rpx;
	// 	margin-right: 18rpx;
	// }
	// .listImg_li:last-child{
	// 	margin-right:0;
	// }
	// .punIt{
	// 	width:24rpx;
	// 	height: 24rpx;
	// 	background-color: #ffffff;
	// 	border-radius: 50%;
	// }
	// .navButton{
	// 	position: absolute;
	// 	background-color:transparent;
	// 	width:100%;
	// 	height: 100%;
	// 	top:0;
	// 	left:0;
	// 	z-index:888;
	// }
	// .navButton::after{
	// 	border:none;
	// }
</style>

